<script lang="ts" setup>
import { ref } from 'vue'

import type { TagProps } from 'element-plus'

type Item = { type: TagProps['type']; label: string;color:string }

const items = ref<Array<Item>>([
  { type: '', label: 'Tag 1', color:"red" },
  { type: 'success', label: 'Tag 2' ,color:"purple" },
  { type: 'info', label: 'Tag 3' ,color:"green"},
  { type: 'danger', label: 'Tag 4' ,color:"green"},
  { type: 'warning', label: 'Tag 5',color:"green" },
])
</script>

<template>
  <div class="flex flex-wrap gap-2 my-2">
    <el-tag 
      v-for="item in items"
      :key="item.label"
      :type="item.type"
      class="mx-1"
      effect="dark"
      :color = "item.color"
      round =  true
    >
      {{ item.label }}
    </el-tag>
  </div>
  <!-- <div class="flex flex-wrap gap-2">
    <el-tag
      v-for="item in items"
      :key="item.label"
      :type="item.type"
      class="mx-1"
      effect="light"
      round
    >
      {{ item.label }}
    </el-tag>
  </div> -->
  <!-- <div class="flex flex-wrap gap-2 my-2">
    <el-tag
      v-for="item in items"
      :key="item.label"
      :type="item.type"
      class="mx-1"
      effect="plain"
      round
    >
      {{ item.label }}
    </el-tag>
  </div> -->
</template>
<style scoped lang="ts">
// .mx-1{
//   border:1px solid red;

// }
// el-tag:not{
//   width:200px;
//   height:50px;
// }
</style>